<template>
  <div class="message-container">
    <MMNavBar back="/my" title="我的消息" rightText="全部已读"></MMNavBar>
    <div class="main-container">
      <van-swipe-cell>
        <MMCell title="收到">
          <span class="point"></span>
        </MMCell>
        <template #right>
          <van-button class="del-btn" type="danger">删除</van-button>
        </template>
      </van-swipe-cell>
      <van-swipe-cell>
        <MMCell title="收到">
          <span class="point"></span>
        </MMCell>
        <template #right>
          <van-button class="del-btn" type="danger">删除</van-button>
        </template>
      </van-swipe-cell>
      <van-swipe-cell>
        <MMCell title="收到">
          <span class="point"></span>
        </MMCell>
        <template #right>
          <van-button class="del-btn" type="danger">删除</van-button>
        </template>
      </van-swipe-cell>
      <van-swipe-cell>
        <MMCell title="收到">
          <span class="point"></span>
        </MMCell>
        <template #right>
          <van-button class="del-btn" type="danger">删除</van-button>
        </template>
      </van-swipe-cell>
    </div>
  </div>
</template>

<script>
import MMNavBar from '../../components/MMNavBar'
import MMCell from '@/components/MMCell'
export default {
  name: 'message',
  components: {
    MMNavBar,
    MMCell
  }
}
</script>

<style lang='less'>
.message-container {
  .main-container {
    background: @success-color;
    padding: 20px 15px 0;
    .point {
      background: @main-color;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      display: inline-block;
    }
    .del-btn {
      height: 55px;
    }
    .van-swipe-cell {
      margin-bottom: 15px;
    }
  }
}
</style>
